﻿@{
    ViewBag.Title = "病历附件查看";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<style>
    * {
        box-sizing: border-box;
    }
</style>
<div>
    <h3>附件为病历APP上传、点击可预览</h3>
    <div id="img-box" style="padding: 10px; height: auto; "></div>
</div>
<div id="outerdiv" style="position:fixed;top:0;left:0;background:rgba(0,0,0,0.7);z-index:2;width:100%;height:100%;display:none;">
    <div id="innerdiv" style="position:absolute;">
        <img id="bigimg" step="0" style="border:5px solid #fff;transform: rotate(0deg);" src="" />
        <button class="easyui-linkbutton" onclick="rotateImg('right')">顺时针</button>
        <button class="easyui-linkbutton" onclick="rotateImg('left')">逆时针</button>
        <button class="easyui-linkbutton" onclick="hidePic()">关闭</button>
    </div>
</div>

<script type="text/javascript">
    //jQuery ajax请求数据

    window.onload = function () {
        $.ajax({
            url: '@Url.Content("~/BM/MobileTask/GetPatientImg")',
            data:
                {
                    TaskCode: '@ViewBag.TaskCode',
                    PatientOrder: '@ViewBag.PatientOrder',
                    TypeCode: -1 // -1 代表全部
                },
            type: "POST",
            dataType: "json",
            success: function (data) {
                //{"success":true,"ImgList":[{}]}
                if (data) {
                    var imgArr = data.ImgList;
                    for (var i = 0; i < imgArr.length; i++) {

                        div = document.createElement('div');
                        div.style.float = "left";
                        div.style.margin = "10px";
                        div.style.display = "inline-block";
                        div.style.positon = "relative";
                        div.style.border = "1px solid #95B8E7";
                        div.id = imgArr[i].TaskCode + i;
                        //console.log(imgArr[i]);
                        div.innerHTML = '<img height="520" step="0" width="auto" id="' + imgArr[i].ID + '"/>';
                        var idex = i + 1;
                        if (imgArr[i].TypeCode == 1)
                            div.innerHTML += '<div><h2>' + "签字单" + '</h2></div>';
                        else if (imgArr[i].TypeCode == 2)
                            div.innerHTML += '<div><h2>' + "交接单" + '</h2></div>';
                        else if (imgArr[i].TypeCode == 4)
                            div.innerHTML += '<div><h2>' + "心电1" + '</h2></div>';
                        else if (imgArr[i].TypeCode == 5)
                            div.innerHTML += '<div><h2>' + "心电2" + '</h2></div>';
                        else if (imgArr[i].TypeCode == 6)
                            div.innerHTML += '<div><h2>' + "心电3" + '</h2></div>';
                        else
                            div.innerHTML += '<div><h2>' + "其他" + '</h2></div>';

                        document.getElementById("img-box").appendChild(div);
                        //var imgids = PicPath[i].replace(".", "\\.");
                        $("#" + imgArr[i].ID).attr('src', 'data:image/jpeg;base64,' + imgArr[i].Img + '');
                        //add2019-12-09 图片点击放大预览
                        $("#" + imgArr[i].ID).click(function () {
                            var _this = $(this);//将当前的img元素作为_this传入函数
                            imgShow("#outerdiv", "#innerdiv", "#bigimg", _this);
                        });
                    }
                }
            }
        });
    }


    function hidePic() {
        $(outerdiv).fadeOut("fast");
    }
    function rotateImg(direction) {
        var step = $("#bigimg").attr("step");//parseInt(img.getAttribute('step'));
        //最小与最大旋转方向，图片旋转4次后回到原方向
        var min_step = 0;
        var max_step = 3;
        if (step === null) {
            step = min_step;
        }
        if (direction == 'right') {
            step++;
            //旋转到原位置，即超过最大值
            if (step > max_step) {
                step = min_step;
            }
        } else {
            step--;
            if (step < min_step) {
                step = max_step;
            }
        }
        $("#bigimg").attr('step', step);
        //旋转角度以弧度值为参数
        var degree = step * 90;
        $("#bigimg").css("transform", "rotate(" + degree + "deg");//. = ;
    }

    //function: 图片点击放大预览 add2019-12-09
    function imgShow(outerdiv, innerdiv, bigimg, _this) {
        var src = _this.attr("src");//获取当前点击的pimg元素中的src属性
        $(bigimg).attr("src", src);//设置#bigimg元素的src属性
        /*获取当前点击图片的真实大小，并显示弹出层及大图*/
        $("<img/>").attr("src", src).load(function () {
            var windowW = $(window).width();//获取当前窗口宽度
            var windowH = $(window).height();//获取当前窗口高度
            var realWidth = this.width;//获取图片真实宽度
            var realHeight = this.height;//获取图片真实高度
            var imgWidth, imgHeight;
            var scale = 0.9;//缩放尺寸，当图片真实宽度和高度大于窗口宽度和高度时进行缩放

            if (realHeight > windowH * scale) {//判断图片高度
                imgHeight = windowH * scale;//如大于窗口高度，图片高度进行缩放
                imgWidth = imgHeight / realHeight * realWidth;//等比例缩放宽度
                if (imgWidth > windowW * scale) {//如宽度扔大于窗口宽度
                    imgWidth = windowW * scale;//再对宽度进行缩放
                }
            } else if (realWidth > windowW * scale) {//如图片高度合适，判断图片宽度
                imgWidth = windowW * scale;//如大于窗口宽度，图片宽度进行缩放
                imgHeight = imgWidth / realWidth * realHeight;//等比例缩放高度
            } else {//如果图片真实高度和宽度都符合要求，高宽不变
                imgWidth = realWidth;
                imgHeight = realHeight;
            }
            $(bigimg).css("width", imgWidth);//以最终的宽度对图片缩放

            var w = (windowW - imgWidth) / 2;//计算图片与窗口左边距
            var h = (windowH - imgHeight) / 2;//计算图片与窗口上边距
            $(innerdiv).css({ "top": h, "left": w });//设置#innerdiv的top和left属性
            $(outerdiv).fadeIn("fast");//淡入显示#outerdiv及.pimg
        });
    }


</script>
